<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>AAAAAA</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<link rel="shortcut icon" href="favicon.ico">

<style type="text/css">	
	/* nav */
	.nav{width:100%;
		height:60px;
		margin:0px auto;
		/*background-color: red;*/
	}
	.nav li{
		float:left;
		width: 200px;
		height:60px;
		line-height:60px;
		text-align:center;
		font-size:30px;
		font-weight:bold;
		position:relative;
		border: solid 2px;
		background-color: blue;
		margin: 1px;
		list-style-type:none; 	/*去掉点*/
	}
	.nav li a.link{
		float:left;
		width: 200px;
	}
	.nav li a{
		color:#FFF;
		text-decoration:none;
		display:block;
	}
	
	.nav ul li a:hover{
		display:block;
	}
	.nav dl{
		width:195px;
		border:1px solid #C33;
		font-size:15px;
		background:#FCC;
		position:absolute;
		top:46px;
		left:0px;
	}
	.nav dl dd a{
		color:#933;
	}
	.nav dl dd a:hover{
		color:#000;
		background:#F36;
		opacity:0.5;
	}
	
	.navbar{
		border: solid 1px;
	}
	
	li{
		background: blue;
		width: 100px;
		
	}
	
</style>

</head>
<body>
    <!--<div class="container-layout">-->
    <div class="layout">
        <div class="line" data-scroll-reveal="enter bottom over 1s and move 100px">
			<div class="navbar">
				<div class="nav">
					<ul>
						<li class="mainmenu">
							<a class="link" href="#">特色工作室-1</a>
							<dl>
								<dd><a href="#">工作室介绍</a></dd>
								<dd><a href="#">特色教程</a></dd>
							</dl>
						</li>
					</ul>
				</div>
				<div class="nav">
					<ul>
						<li class="mainmenu">
							<a class="link" href="#">特色工作室-2 </a>
							<dl>
								<dd><a href="#">工作室介绍</a></dd>
								<dd><a href="#">特色教程</a></dd>
							</dl>
						</li>
					</ul>					
				</div>
			</div>
        </div>        
    </div>



<!-- jQuery -->
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>

<script type="text/javascript">
	/*---------------导航菜单栏 开始-----------------------*/
	function nav(){
		$("dl").hide();	//先隐藏
		
		$("li.mainmenu").hover(function(){
			$(this).find("dl").stop(true,true);
			$(this).find("dl").slideDown();
			
		},function(){
			$(this).find("dl").stop(true,true);
			$(this).find("dl").slideUp();
		});		
	}
	nav();
	/*---------------导航菜单栏 结束-----------------------*/
</script>

</body>
</html>

